<!--表格示例-->
<script setup lang="ts">
import UniverSheet from "@/components/UniverJs/UniverSheet.vue";
const data = ref({});
const univerRef = ref<InstanceType<typeof UniverSheet> | null>(null);
const testFunc = function (o: any) {
  console.log(o);
};

import * as icons from "@element-plus/icons-vue";

function test() {
  let a = univerRef.value?.getData();
  console.log(a);
}

onMounted(() => {
  //
});
</script>
<template>
  <div class="app-container my-univer-sheets">
    <div>
      <div class="mb-1">
        <el-button :icon="icons.Plus">添加一行</el-button>
        <el-button type="primary" @click="test">保存</el-button>
        <el-button type="success">
          <el-icon><Notebook /></el-icon>添加临时表格
        </el-button>
        <el-button type="info">
          <el-icon><Link /></el-icon>网络掉线，重连中...
        </el-button>
        <el-button type="warning">Warning</el-button>
        <el-button type="danger">Danger</el-button>
        <el-button :icon="icons.Search" circle />
        <el-button type="primary" :icon="icons.Edit" circle />
        <el-button type="success" :icon="icons.Check" circle />
        <el-button type="info" :icon="icons.Message" circle />
        <el-button type="warning" :icon="icons.Star" circle />
        <el-button type="danger" :icon="icons.Delete" circle />
      </div>
    </div>
    <UniverSheet
      id="sheet"
      ref="univerRef"
      :data="data"
      :isFooter="false"
      :Func="testFunc('我是准备传入到子组件的一个函数')"
    />
  </div>
</template>
<style scoped lang="scss">
.my-univer-sheets {
  height: 90vh;
  max-height: 98vh;
  display: flex;
  flex-direction: column;
}
#sheet {
  /** The height of the Union uses the height of the parent container */
  flex: 1;
}
</style>
